<template>
  <div>
    <van-field
        v-if="disabled"
        readonly
        v-model="nvalue"
        :label="label"
    />
    <van-field
        v-if="!disabled"
        readonly
        clickable
        clearable
        v-model="nvalue"
        :label="label"
        :placeholder="handlePlaceholder()"
        v-bind="$attrs" v-on="$listeners"
        @click="showPicker = true;"
    />

    <!-- 选择器 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
          :title="title"
          show-toolbar
          :columns="datalist"
          :loading="loading"
          @confirm="onConfirm"
          @cancel="showPicker = false"
      >
        <template #option="option">
          <div style="display: flex; flex-direction: column; align-items: center;">
            <div>{{ option[labelName] }}</div>
          </div>
        </template>
      </van-picker>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pd: { currPageIndex: 1, pageSize: this.pageSize, count: 0 },
      nvalue: null,
      showPicker: false,
      loading: false,
      datalist: [],
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    title: {
      type: String,
      default: function () {
        return '请选择';
      }
    },
    label: {
      type: String,
      default: function () {
        return null;
      }
    },
    data: {
      type: Array,
      default: function () {
        return [];
      }
    },
    url: {
      type: String,
      default: function () {
        return null;
      }
    },
    value: {
      type: String,
      default: function () {
        return null;
      }
    },
    postData: {
      type: Object,
      default: function () {
        return null;
      }
    },
    pageSize: {
      type: Number,
      default: function () {
        return 20;
      }
    },
    keyName: {
      type: String,
      default: function () {
        return "id";
      }
    },
    labelName: {
      type: String,
      default: function () {
        return "name";
      }
    },
    valueName: {
      type: String,
      default: function () {
        return "id";
      }
    },
    disabled:{ type: Boolean, default: false },
  },
  watch: {
    async url(val) {
      this.getListData();
    },
    data: {
      immediate: true,
      async handler(newV, oldV) {
        this.datalist = newV;
      }
    },
    value: {
      async handler(newval, oldval) {
        this.nvalue = newval;
      },
      immediate: true
    }
  },
  created() {
    this.getListData();
  },
  methods: {
    getListData() {
      if (this.url != null) {
        this.loading = true;
        if (this.postData != null) {
          for (var p in this.postData) {
            this.pd[p] = this.postData[p];
          }
        }
        elm.post(this.url, this.pd).then((res) => {
          if (res.pagedata != undefined) {
            this.pd.count = res.count;
            this.datalist = res.pagedata;
          } else {
            this.datalist = res;
          }
          this.loading = false;
        });
      }
    },
    handlePlaceholder() {
      return "请选择"+ this.label;
    },
    onConfirm(value) {
      this.nvalue = value[this.valueName];
      this.showPicker = false;
      this.$emit('change', this.nvalue);
    },
  }
}
</script>

<style scoped>
</style>